<template>
  <div class="section-container">
    <div class="section-title">
      登录日志
    </div>
    <div class="content">
      <RuifoxTable :loading="tableLoading" :default-index="true" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #loginTime="{ element }">
          <span>{{ dayjs(element.loginTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
        <template #status="{ element }">
          <span>{{ element.status === 1 ? '登录成功' : '登录失败' }}</span>
        </template>
      </RuifoxTable>
      <PaginationViewSimple :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { loginLog } from '@/api/logs'
import dayjs from 'dayjs'

const fieldList = ref([
  {
    title: '操作用户',
    name: 'account'
  },
  {
    title: 'IP地址',
    name: 'ip'
  },
  {
    title: '状态',
    name: 'status'
  },
  {
    title: '操作时间',
    name: 'loginTime'
  }
])
const defaultQuery = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})

const tableLoading = ref(false)
const queryData = reactive(Object.assign({}, defaultQuery))
const tableData = ref([])
const handleGetLoginMessage = async () => {
  let res = await loginLog(queryData)
  queryData.total = res.data.total
  tableData.value = res.data.list
}
handleGetLoginMessage()
const handleSizeChange = size => {
  queryData.pageSize = size
  handleGetLoginMessage()
}
const handleCurrentChange = page => {
  queryData.currentPage = page
  handleGetLoginMessage()
}
</script>
<style scoped lang="scss"></style>
